<extend name="Public/base"/>

<block name="body">
    <style type="text/css">
    .uploadify {display: inline-block;}
    </style>
    <script type="text/javascript" src="__STATIC__/uploadify/jquery.uploadify.min.js"></script>
    <div class="main-title">
        <h2>
            <if condition="ACTION_NAME eq 'add'">
                新增
            <else/>
                编辑
            </if>
            <button class="btn btn-default btn-return" onclick="javascript:history.back(-1);return false;"><i class="glyphicon glyphicon-share-alt"></i> 返 回</button>
        </h2>
    </div>
    <form action="" method="post" class="form">
        <div class="form-item form-group">
            <label class="item-label">标题<span class="check-tips">必填</span></label>
            <div class="controls">
                <input type="text" class="text form-control input-large" name="title" value="{$title}">
            </div>
        </div>
        <div class="form-item form-group">
            <label class="item-label">作者<span class="check-tips">必填</span></label>
            <div class="controls">
                <input type="text" class="text form-control input-small" name="author" value="{$author}">
            </div>
        </div>
        <div class="form-item form-group">
            <label class="item-label">描述<span class="check-tips">选填</span></label>
            <div class="controls">
                <input type="text" class="text form-control input-small" name="detail" value="{$detail}">
            </div>
        </div>

        <div class="form-item form-group">
            <label class="item-label">来自于<span class="check-tips">必填</span></label>
            <div class="controls">
                <input type="text" class="text form-control input-small" name="from" value="{$from|default='66Play.com'}">
            </div>
        </div>

        <div class="form-item form-group">
            <label class="item-label">发布时间<span class="check-tips">
            </span></label>
            <div class="controls">
                <input type="text" class="text input-large form-control time" name="create_time" value="{$create_time|date='Y-m-d H:i',###}" placeholder="发布时间">
            </div>
        </div>

        <div class="form-item form-group">
            <label class="item-label">类型<span class="check-tips"></span></label>
            <label class="radio-inline">
                <input type="radio" name="type" <if condition="$type eq 1">checked</if> value="1"  /> 公告
            </label>
            <label class="radio-inline">
                <input type="radio" name="type" <if condition="$type eq 0 or $type eq ''">checked</if> value="0" />资讯
            </label>
        </div>

        <div class="form-item form-group">
            <label class="item-label">游戏<span class="check-tips">公告类型请选择“无”</span></label>
            <div class="controls">
                <select name="game_id">
                    <option value="0" <if condition="$game_id eq 0 or $game_id eq ''">selected</if>>无</option>
                    <volist name="games" id="game">
                        <option value="{$game['id']}" <if condition="$game_id eq $game['id']">selected</if>>{$game.name}</option>
                    </volist>
                </select>
            </div>
        </div>

        <div class="form-item form-group">
            <label class="item-label">赛事<span class="check-tips">公告类型请选择“无”</span></label>
            <div class="controls">
                <select name="match_id">
                    <option value="0" <if condition="$match_id eq 0 or $match_id eq ''">selected</if>>无</option>
                    <volist name="matches" id="match">
                        <option value="{$match['id']}" <if condition="$match_id eq $match['id']">selected</if>>{$match.title}</option>
                    </volist>
                </select>
            </div>
        </div>

        <div class="form-item form-group cf">
            <label class="item-label">封面<span class="check-tips">资讯:290*165px, 公告:43*43px</span></label>
            <div class="controls">
                <div class="controls">
                    <input type="file" id="upload_picture_cover">
                    <input type="hidden" name="cover" id="cover_id_cover" value="{$cover}" />
                    <div class="upload-img-box">
                        <notempty name="cover">
                        <div class="upload-pre-item"><img src="{:url_format($cover)}"/></div>
                        </notempty>
                    </div>
                </div>
                {:hook('adminPicUpload', array('id'=>"upload_picture_cover",'return'=>"cover_id_cover", 'type' => 'path'))}                                                              
            </div>
        </div>

        <div class="form-item form-group">
            <label class="item-label">内容<span class="check-tips">必填</span></label>
            <div>
                <button type="button" class="btn btn-default" onclick="addContent('text');">
                    <i class="glyphicon glyphicon-plus"></i> 文本
                </button>
                <button type="button" class="btn btn-default" onclick="addContent('image');">
                    <i class="glyphicon glyphicon-plus"></i> 图片(小于1M)
                </button>
                <button type="button" class="btn btn-default" onclick="addContent('video');">
                    <i class="glyphicon glyphicon-plus"></i> 视频
                </button>
            </div>
            <div id="content_list" style="padding-left: 10px">
                <ol style="list-style: decimal;" data-bind="foreach:contentList">
                    <li style="padding: 10px 0;">
                            <a class="btn btn-default btn-xs" href="javascript:;">
                            <i class="glyphicon glyphicon-trash" style="cursor: pointer;font-size: 18px;" title="删除" data-bind="click:remove, attr:{'data-index':$index()}"></i>
                            </a>
                            <a class="btn btn-default btn-xs" href="javascript:;">
                            <i class="glyphicon glyphicon-arrow-up" style="cursor: pointer;font-size: 20px;" title="上移" data-bind="click:moveup, attr:{'data-index':$index()}"></i>
                            </a>
                            <a class="btn btn-default btn-xs" href="javascript:;">
                            <i class="glyphicon glyphicon-arrow-down" style="cursor: pointer;font-size: 20px;" title="下移" data-bind="click:movedown, attr:{'data-index':$index()}"></i>
                            </a>    
                            <input type="hidden" name="" value="" data-bind="attr:{'name':'content['+$index()+'][type]', 'value':type}"/>
                        <!-- ko if: type == 'text' -->
                            <input class="text form-control input-large" type="text" name="" style="display: inline-block;" placeholder="输入内容" data-bind="attr:{'name':'content['+$index()+'][data][content]'}, value:data.content"/>
                            <label class="radio-inline">
                                <input type="radio" value="1" data-bind="attr:{'name':'content['+$index()+'][data][bold]', 'checked':data.bold == 1}"/> 加粗
                            </label>
                            <label class="radio-inline">
                                <input type="radio" value="0" data-bind="attr:{'name':'content['+$index()+'][data][bold]', 'checked':data.bold != 1}"/> 正常
                            </label>
                        <!-- /ko -->
                        <!-- ko if: type == 'image' -->
                            <input class="text form-control input-mini" type="text" name="" value="" style="display: inline-block;" placeholder="比例(如16:9)" data-bind="attr:{'name':'content['+$index()+'][data][scale]'}, value:data.scale"/>
                            <input class="text form-control input-small JS-image" type="text" name="" style="display: inline-block;" placeholder="图片链接" data-bind="attr:{'name':'content['+$index()+'][data][url]'}, value:data.url"/>
                            <button type="button" id="" data-bind="attr:{'id':'upload_image_'+$index()}">上传图片</button>
                        <!-- /ko -->
                        <!-- ko if: type == 'video' -->
                            <input class="text form-control input-mini" name="" style="display: inline-block;" type="number" placeholder="视频id" data-bind="attr:{'name':'content['+$index()+'][data][id]'}, value:data.id"/>
                        <!-- /ko -->
                        <!-- <a href="javascript:;"><i class="glyphicon glyphicon-pencil"></i></a> -->
                    </li>
                </ol>
            </div>
        </div>

        <!-- <div class="form-item form-group">
            <label class="item-label">排序<span class="check-tips">必填</span></label>
            <input type="number" class="text form-control input-small" name="sort" value="{$sort|default=0}">
        </div> -->

        <div class="form-item form-group">
            <label class="item-label">阅读次数</label>
            <input type="number" class="text form-control input-mini" name="read" value="{$read|default=0}">
        </div>
        <div class="form-item form-group">
            <label class="item-label">热门<span class="check-tips"></span></label>
            <label class="radio-inline">
                <input type="radio" name="is_hot" <if condition="$is_hot eq 1">checked</if> value="1"  /> 开启
            </label>
            <label class="radio-inline">
                <input type="radio" name="is_hot" <if condition="$is_hot eq 0 or $is_hot eq ''">checked</if> value="0"  />关闭
            </label>
        </div>
        <div class="form-item form-group">
            <label class="item-label">状态<span class="check-tips"></span></label>
            <label class="radio-inline">
            <input type="radio" name="status" <if condition="$status eq 1 or $status eq ''">checked</if> value="1"  /> 开启
            </label>
            <label class="radio-inline">
            <input type="radio" name="status" <eq name="status" value="0">checked</eq> value="0"  />关闭
            </label>
        </div>
        <div class="form-item form-group form-action">
            <input type="hidden" name="id" value="{$id}" />
            <input type="hidden" name="from_crawle" value="{$from_crawle}" />
            <button class="btn submit-btn ajax-post btn-success btn-block" id="submit" type="submit" target-form="form">确 定</button>
            <!-- <button class="btn btn-return" onclick="javascript:history.back(-1);return false;">返 回</button> -->
        </div>
    </form>
    <div id="c_template" style="display: none;">
        <li style="padding: 10px 0;">
            <input class="text form-control input-small JS-s_content" name="content[]" style="display: inline-block;"/>
            <a href="javascript:;"><i class="glyphicon glyphicon-pencil"></i></a>
            <a href="javascript:;"><i class="glyphicon glyphicon-trash"></i></a>
        </li>
    </div>
</block>

<block name="script">
    <script type="text/javascript">
        //导航高亮
        highlight_subnav('{:U('index')}');
    </script>
    <script type="text/javascript" src="__STATIC__/knockout-2.3.0.js"></script>
    <link href="__STATIC__/datetimepicker/css/datetimepicker.css" rel="stylesheet" type="text/css">
    <php>if(C('COLOR_STYLE')=='blue_color') echo '<link href="__STATIC__/datetimepicker/css/datetimepicker_blue.css" rel="stylesheet" type="text/css">';</php>
    <link href="__STATIC__/datetimepicker/css/dropdown.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="__STATIC__/datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
    <script type="text/javascript" src="__STATIC__/datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>
    <script type="text/javascript">
        var viewModel;
        $(function(){
            $('.time').datetimepicker({
                format: 'yyyy-mm-dd hh:ii',
                language:"zh-CN",
                minView:0,
                autoclose:true
            });
            viewModel = {
                contentList : ko.observableArray([])
            };
            ko.applyBindings(viewModel);

            var contents = {$content|json_encode};
            if (contents) {
                viewModel.contentList(contents);
                $.each(contents, function(index, el) {
                    if (el.type == 'image') {
                        initUpload(index);
                    }
                });
            }
        });

        function remove(obj, el) {
            var list = viewModel.contentList();
            var index = $(el.target).attr('data-index');
            list.remove(parseInt(index));
            viewModel.contentList(list);
            return false;
        }

        function moveup(obj, el) {
            var list = viewModel.contentList();
            var index = parseInt($(el.target).attr('data-index'));
            if(index > 0) {
                var tmp = list[index];
                list[index] = list[index-1];
                list[index-1] = tmp;
            }
            viewModel.contentList(list);
            return false;
        }

        function movedown(obj, el) {
            var list = viewModel.contentList();
            var index = parseInt($(el.target).attr('data-index'));
            if(index < list.length - 1) {
                var tmp = list[index];
                list[index] = list[index+1];
                list[index+1] = tmp;
            }
            viewModel.contentList(list);
            return false;
        }

        function addContent(type) {
            var c = {
                type : type
            }
            switch(type) {
            case 'text':
                c.data = {
                    bold : 0,
                    content : '',
                }
                break;
            case 'video':
                c.data = {
                    id : null,
                }
                break;
            case 'image':
                c.data = {
                    scale : '',
                    url : ''
                }
                break;
            }
            var list = viewModel.contentList();
            list.push(c);
            viewModel.contentList(list);

            if (type == 'image') {
                initUpload(list.length -1);
            }
            return false;
        }
        Array.prototype.remove = function(dx) {
            if(isNaN(dx)||dx>this.length){return false;}
            for(var i = 0, n = 0; i < this.length; i++) {
                if(this[i] != this[dx]) {
                    this[n++]=this[i];
                }
            }
            this.length-=1;
        }

        function initUpload(index) {
            var uploadCallback = function(file, data) {
                var data = $.parseJSON(data);
                if (data.status) {
                    $('#upload_image_' + index).parents('li').find('.JS-image').val(data.url);
                }
            }
            $("#upload_image_"+index).uploadify({
                "height"          : 30,
                "swf"             : "__STATIC__/uploadify/uploadify.swf",
                "fileObjName"     : "download",
                "buttonText"      : "上传图片",
                "uploader"        : "{:U('File/uploadPicture',array('session_id'=>session_id()))}",
                "width"           : 120,
                'removeTimeout'   : 1,
                'fileTypeExts'    : '*.jpg; *.png; *.gif;',
                "onUploadSuccess" : uploadCallback,
                'onFallback' : function() {
                    alert('未检测到兼容版本的Flash.');
                }
            });
        }
    </script>
</block>